// 获取数据
var ulList=document.querySelector(".ulList")
let xhr1=new XMLHttpRequest();
xhr1.open("get","http://chst.vip:1234/api/getbaicaijiatitle",false);
xhr1.onload=function(){
let lis1="";
if(xhr1.status===200){
let res1=JSON.parse(xhr1.responseText);
console.log(res1.result);
res1.result.forEach(element => {
                    lis1+=`
                    <li id="${element.titleId}"><span>${element.title}</span></li>
                    `
});
}
ulList.innerHTML=lis1;
}
xhr1.send();


// 设置首页展示内容
var ulbox=document.querySelector("#product .info")
let titleid=0;
let xhr2=new XMLHttpRequest();
xhr2.open("get","http://chst.vip:1234/api/getbaicaijiaproduct?titleid="+titleid,false);
xhr2.onload=function(){
let lis2="";
if(xhr2.status===200){
let res2=JSON.parse(xhr2.responseText);
console.log(res2.result);
res2.result.forEach(sss=>{
lis2+=`
                    <li>
                    <div class="out">
                                        <div class="left">
                                        ${sss.productImg}
                                        </div>
                                        <div class="right">
                                        <div class="title">
                                                            <h4>${sss.productName}</h4>
                                                            <div class="price">
                                                            ${sss.productPrice}                 
                                                            </div>
                                        </div>
                                        <div class="mid">
                                                            <div class="bar">${sss.productCouponRemain}</div>
                                                            
                                                            
                                        </div>
                                        <div class="click">
                                                            <div class="left">${sss.productCoupon}</div>
                                                            <div class="right">${sss.productHref}</div>
                                        </div>
                                        </div>
                    </div>
                    </li>
`
})
}
ulbox.innerHTML=lis2;
}
xhr2.send();
 
// 封装函数
function ajax(titleid){
let xhr2=new XMLHttpRequest();
xhr2.open("get","http://chst.vip:1234/api/getbaicaijiaproduct?titleid="+titleid,false);
xhr2.onload=function(){
let lis2="";
if(xhr2.status===200){
let res2=JSON.parse(xhr2.responseText);
console.log(res2.result);
res2.result.forEach(sss=>{
lis2+=`
                    <li>
                    <div class="out">
                                        <div class="left">
                                        ${sss.productImg}
                                        </div>
                                        <div class="right">
                                        <div class="title">
                                                            <h4>${sss.productName}</h4>
                                                            <div class="price">
                                                            ${sss.productPrice}                 
                                                            </div>
                                        </div>
                                        <div class="mid">
                                                            <div class="bar">${sss.productCouponRemain}</div>
                                                            <span></span>
                                        </div>
                                        <div class="click">
                                                            <div class="left">${sss.productCoupon}</div>
                                                            <div class="right">${sss.productHref}</div>
                                        </div>
                                        </div>
                    </div>
                    </li>
`
})
}
ulbox.innerHTML=lis2;
}
xhr2.send();
}

// 点击获取id 换内容
ulList.onclick=function(e){
                    var e=e ||window.event;
                    var target=e.target || e.srcElment;
                    if(target.nodeName==="SPAN"){
                                        let titleid=target.parentNode.id
                                        console.log(titleid);
                                        ajax(titleid)
                                        
                    }             
                    }